<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
		.focus{
			width: calc(533px * 2);
			height: calc(300px * 2);
			overflow: hidden;
			position: relative;
		}
		.slidePic img{
			width: 100%;
			height: 100%;
		}
		.slide-focus{
			position: absolute;
			left: calc(50% - 85px);
			bottom: 30px;
			z-index: 3;
		}
		.slide-focus span{
			float: left;
			margin-right: 20px;
			width: 12px;
			height: 12px;
			background: rgba(0,0,0,0.5);
			border: 1px solid #fff;
			border-radius: 3px;
		}
		.slide-focus span.on{
			background: #f77;
			border: 1px solid #f77;
		}
		.slide-box{
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
			height: 100%;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			transition:all 0.5s;
		}
		.slide-box div{
			float: left;
			width: calc(100% / 5);/*5代表轮播图片个数*/
			height: 100%;
			background-size: 100%;
			background-repeat: no-repeat;
		}
	</style>
</head>
<body>
	<!-- 如果html结构与demo不同，则需要改插件js -->
	<div class="focus">
		<div id="slidePic" class="slidePic">
			<img src="images/1.jpg" alt="">
			<img src="images/2.jpeg" alt="">
			<img src="images/3.jpeg" alt="">
			<img src="images/4.jpg" alt="">
			<img src="images/5.jpeg" alt="">
		</div>
	</div>
	<script src="slide.js"></script>
	<script>
		window.onload = function(){
			autoSlide.init();
		}
	</script>
</body>
</html>